<template>
    <div>
        <cli-title-customer></cli-title-customer>
        <el-container style="height:100%">

            <el-container style="height:100%">
                <el-main>
                    <div class="main">
                        <div class="search">
                            <div class="searchLogo">
                                <div class="logo">
                                    <img src="../../../../assets/image/storeIcon.png">

                                </div>
                                <div style="float: right">
                                    <h2>{{this.storeName}}</h2>
                                </div>
                            </div>
                            <el-input placeholder="店内搜索" v-model="searchBox" class="searchBox">
                                <el-button style="background-color: rgba(245,194,38,0.7)" slot="append" icon="el-icon-search"></el-button>
                            </el-input>
                        </div>
                        <div class="slide">
                            <el-carousel height="400px">
                                <el-carousel-item style="background-color: #ffccd9">
                                    <div style="margin-top:10%;margin-left: 20%">
                                        <img src="../../../../assets/image/logoText1.png">
                                    </div>
                                </el-carousel-item>
                                <el-carousel-item style="background-color: #ffe8c0">
                                    <div style="margin-top:10%;margin-left: 20%">
                                        <img src="../../../../assets/image/logoText1.png">
                                    </div>
                                </el-carousel-item>
                                <el-carousel-item style="background-color: #c4ddbd">
                                    <div style="margin-top:10%;margin-left: 20%">
                                        <img src="../../../../assets/image/logoText1.png">
                                    </div>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                        <div style="margin-top: 5%;margin-bottom: 5%">
                            <el-divider content-position="center">
                                <div style="float: top;margin-left: 30%">
                                    <img src="../../../../assets/image/icon.png">
                                </div>
                                <div style="float: bottom">
                                    <h2 style="color:rgb(22, 22, 22)">当季新品</h2>
                                </div>
                            </el-divider>
                        </div>
                        <product-list :list="1" :pro-list="this.proList"></product-list>
                        <div style="margin-top: 5%;margin-bottom: 5%">
                            <el-divider content-position="center">
                                <div style="float: top;margin-left: 30%">
                                    <img src="../../../../assets/image/icon.png">
                                </div>
                                <div style="float: bottom">
                                    <h2 style="color:rgb(22, 22, 22)">明星产品</h2>
                                </div>
                            </el-divider>
                        </div>
                        <div class="star">
                            <el-carousel :interval="5000" type="card" arrow="hover" height="500px">
                                <el-carousel-item v-for="item in proList" :key="item">
                                    <el-image
                                            style="width: 100%; height: 100%"
                                            :src="imageURL+item.pic1"
                                            >
                                    </el-image>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                        <div style="margin-top: 5%;margin-bottom: 5%">
                            <el-divider content-position="center">
                                <div style="float: top;margin-left: 30%">
                                    <img src="../../../../assets/image/icon.png">
                                </div>
                                <div style="float: bottom">
                                    <h2 style="color:rgb(22, 22, 22)">热卖单品</h2>
                                </div>
                            </el-divider>
                        </div>
                        <product-list :list="1" :pro-list="this.proList"></product-list>
                        <br>
                        <br>
                        <br>
                    </div>
                </el-main>
            </el-container>
        </el-container>
        <div class="footer-wrapper" style="height: 2rem; bottom: 0rem">
        </div>
    </div>
</template>

<script>
    import POST from "../../../../api/POST";
    import Cookie from "js-cookie";
    import API_PRO from "../../../../api/API_PRO";
    import ProductList from "../../../../components/base/productList";
    import CliTitleCustomer from "../../../../components/base/cliTitleCustomer";
    export default {

        name: "index",
        components: {CliTitleCustomer, ProductList},
        data(){
            return{
                imageURL : API_PRO.imageURL,

                storeName:'only',
                storeNo:'',
                searchBox: '',
                proList:[{
                    pic1:'iphone3.jpg',
                    productname:'333',
                    unitprice:'333',
                    storename:'333'
                },]
            }
        },
        mounted() {
            console.log(this.$route.params)
            this.storeNo = this.$route.params.storeId;
            this.getList();
        },
        methods:{
            getList(){
                let data= {
                    token:Cookie.get('token'),
                    saleraccount:this.storeNo
                };
                POST.store(data).then(res=>{
                    this.proList = res;
                    this.storeName = res[0].storeName
                })

            }
        }
    }

</script>


<style scoped>
    .header-wrapper {
        width: 100%;
        height: 20%;
        background-color: rgb(22, 22, 22);
        position: fixed;
        overflow-y: hidden;
        z-index: 3;
    }
    .footer-wrapper {
        width: 100%;
        height: 20%;
        background-color: rgb(22, 22, 22);
        position: fixed;
        overflow-y: hidden;
        z-index: 3;
    }
    .logo {
        float: left;
        margin-top: 5px;
    }
    .logoText {
        float: left;
        margin-top: 10px;
    }
    .main {
        width: 100%;
        position: absolute;
        right: 0;
        left: 0;
        top: 65px;
        margin: auto;
    }
    .searchLogo {
        float: left;
        margin-left: 20%;
        margin-right: 2%;
    }
    .searchBox {
        width: 50%;
    }
    .slide {
        margin-top: 1%;
    }
    .star {
        margin-left: 10%;
        width: 80%;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 500px;
        margin: 0;
    }

</style>
